<template>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				indicator-active-color="#1492ff" :duration="duration">
				<swiper-item v-for="(item,inex) in swiperImage" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="classify">
			<view class="" v-for="(item,inex) in iconList" :key="inex">
				<view class="list-flex">
					<icon :class="['iconfont',item.icon]"></icon>
					<text>{{item.title}}</text>
				</view>

			</view>

		</view>
		<!-- 今日上榜 -->
		<view class="list">
			<icon style="width: 40rpx;margin:0 20rpx;" class="iconfont icon-paiming"></icon>
			<text>今日榜单</text>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="scroll-view-item_H" v-for="(item,index) in histImage" :key="index">
				<image class="img"
					:src="item.img"
					mode="aspectFill"></image>
					
					<view class="intro">
						<text class="intro-txt">
							{{item.theme}}
						</text>
						<view class="intro-b">
							<view class="intro-user">
								<image :src="item.userImg" mode="widthFix"></image>
								<text>青衣</text>
							</view>
							
							<view class="intro-L">
								<icon style="width: 40rpx;margin-right: 10rpx;" class="iconfont icon-icon:before"></icon>
								<text>{{item.flow}}</text>
							</view>
						</view>
					</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperImage: [
					"https://img1.baidu.com/it/u=959994705,1435967929&fm=253&fmt=auto&app=138&f=JPEG?w=513&h=300",
					"https://img1.baidu.com/it/u=3687658660,1005320645&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
					"https://img2.baidu.com/it/u=3707372823,331525916&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=841",
					"https://img0.baidu.com/it/u=3196898195,2211857372&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
				],
				iconList: [{
					title: '话题分类',
					icon: 'icon-huati'
				}, {
					title: '热门话题',
					icon: 'icon-remen'
				}, {
					title: '视频',
					icon: 'icon-shipin'
				}, {
					title: '关注',
					icon: 'icon-guanzhu'
				}],
				histImage:[{theme:'复活吧!我的爱人',img:'https://img0.baidu.com/it/u=1851818434,463669186&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',userImg:'https://img2.baidu.com/it/u=2833484760,1116678162&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=f7d136d4adb09735c24e84573634a6f2',flow:'23441'},{theme:'月婵仙子',img:'https://img2.baidu.com/it/u=633195983,897191176&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=803',userImg:'https://img2.baidu.com/it/u=2833484760,1116678162&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=f7d136d4adb09735c24e84573634a6f2',flow:'23400'},{theme:'火国公主',img:'https://img2.baidu.com/it/u=714312193,1266341158&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=886',userImg:'https://img2.baidu.com/it/u=2833484760,1116678162&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=f7d136d4adb09735c24e84573634a6f2',flow:'22890'},{theme:'战神罗峰VS唐三',img:'https://img2.baidu.com/it/u=3419954380,3094477477&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=284',userImg:'https://img2.baidu.com/it/u=2833484760,1116678162&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=f7d136d4adb09735c24e84573634a6f2',flow:'22332'}]
			}
		},
		onLoad() {

		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.classify {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;
			padding-bottom: 10rpx;

			.list-flex {
				display: flex;
				flex-direction: column;
				text-align: center;
				justify-content: center;
				align-items: center;

				.iconfont {
					justify-content: center;
				}

				text {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
.list{
	display: flex;
	padding: 20rpx 0;
	border-top: 2rpx solid #f5f5f5;
	text{
		font-weight: bold;
	}
}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			    background-color: #f5f5f5;
		}

		.scroll-view-item_H {
			display: inline-block;
			font-size: 36rpx;
			padding: 20rpx 10rpx 20rpx 10rpx;
			width: 45%;

			.img {
				width: 100%;
				height: 200rpx !important;
				border-radius: 20rpx 20rpx 0 0 ;
				vertical-align: bottom;
			}
			.intro{
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				background-color: #FFFFFF;
				border-radius:  0 0 20rpx 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				.intro-txt{
					
				}
				.intro-b{
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.intro-user{
						display: flex;
						align-items: center;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 30rpx;
							margin-right: 10rpx;
						}
					}
				
					.intro-L{
						display: flex;
						align-items: center;
						width: auto;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						
						
					}
				}
			}
			

		}
	}

	/deep/.data-v-57280228 {
		width: 100%;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 480rpx;
	}

	.swiper-item {
		display: block;
		height: 480rpx;
		line-height: 480rpx;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
